(function() {
	var tpl = function() {
		/*<el-input placeholder="输入关键字进行过滤" v-model="filterText" icon="search">
		</el-input>
		<h1 class="treetitle" v-once>
			<span v-html="icon"></span>
			<span>{{title}}</span>
			<span @click="rightIconClick" v-html="rightIcon" style="position: absolute; right: 25px; cursor: pointer;"></span>
		</h1>
		<el-tree :style="styleObject" :render-content="renderContent" class="filter-tree" :data="data" :props="defaultProps" highlight-current :expand-on-click-node="false" @node-click="handleNodeClick" :default-expand-all="true" :filter-node-method="filterNode" ref="tree">
		</el-tree>
		<el-dropdown :hide-on-click="false" @command="handleCommand" style="display:none; opacity: 0;" ref="contexts" trigger="click" v-if="contexts" @visible-change="showContexts">
			<span class="el-dropdown-link">
				<i class="el-icon-caret-bottom"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item v-for="(content, index) in contexts" :key="content.name" :command="''+index" divided :disabled="content.disabled">{{content.name}}</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		*/
	};

	function genid() {
		return Math.floor(Math.random() * (9999 - 1000 + 1) + 1000);
	}

	function fnToString(fn) {
		return /\*(.*?)\*/g.exec(fn.toString().replace(/\s+/g, " "))[1].trim();
	}

	function VanyTree_(setting) {
		var el = document.getElementById(setting.el);
		if(!el) {
			throw new Error("未找到该元素" + setting.el);
		}
		el.innerHTML = fnToString(tpl);
		el.className = "vanytree";
		var vanytree = new Vue({
			el: "#" + setting.el,
			data: function() {
				var defaultProps = {
					children: "children",
					label: "name"
				};
				if(setting.defaultProps){
					defaultProps = setting.defaultProps;
				}
				return {
					filterText: "",
					title: setting.title,
					icon: setting.icon,
					rightIcon: setting.rightIcon,
					url: setting.url,
					contexts: setting.contexts,
					data: [],
					defaultProps: defaultProps,
					styleObject: {
						height: "auto"
					}
				};
			},
			methods: {
				digui: function(data, idKey, nameKey, childrenKey){
					for(var i=0; i<data.length; i++){
						if(idKey){
							data[i].id = data[i][idKey];
						}
						if(nameKey){
							data[i].name = data[i][nameKey];
						}
						if(data[i][childrenKey]){
							this.digui(data[i][childrenKey], idKey, nameKey, childrenKey);
						}
					}
				},
				setTreeHeight: function(height) {
					this.styleObject.height = height + "px";
				},
				getData: function(url, params) {
					VanyAjax(url, params, "GET", "#" + setting.el).done(function(data){
						if(url.indexOf("role") > -1){
							for(var i=0; i<data.length; i++){
								data[i].name = data[i].roleName;
								data[i].id = data[i].roleCode;
								data[i].disabled = data[i].status === "1" ? false : true;
							}
						}
						if(url.indexOf("team") > -1){
							for(var i=0; i<data.length; i++){
								data[i].name = data[i].teamName;
								data[i].id = data[i].teamCode;
								data[i].disabled = data[i].status === "1" ? false : true;
							}
						}
						if(url.indexOf("user") > -1){
							this.digui(data, "code", null, "childrenList");
						}
						this.data = data;
					}, false, this)
					/*this.$http({
						method: "GET",
						url: url,
						params: params
					}).then(function(response) {
						response = response.data;
						if(url.indexOf("role") > -1){
							for(var i=0; i<response.resultData.length; i++){
								response.resultData[i].name = response.resultData[i].roleName;
								response.resultData[i].id = response.resultData[i].roleCode;
								response.resultData[i].disabled = response.resultData[i].status === "1" ? false : true;
							}
						}
						if(url.indexOf("team") > -1){
							for(var i=0; i<response.resultData.length; i++){
								response.resultData[i].name = response.resultData[i].teamName;
								response.resultData[i].id = response.resultData[i].teamCode;
								response.resultData[i].disabled = response.resultData[i].status === "1" ? false : true;
							}
						}
						this.data = response.resultData;
					}, function(error) {
						console.log(error)
					});*/
				},
				isEmptyTree: function() {
					return this.data.length === 0;
				},
				filterNode: function(value, data) {
					if(!value) return true;
					//return data.label.indexOf(value) !== -1;
					return data[this.defaultProps.label].indexOf(value) !== -1;
				},
				handleNodeClick: function(data, node, nodeComponent) {
					setting.click.call(this, data, node, nodeComponent);
				},
				// TODO
				resizeTree: function() {

				},
				handleCommand: function(command) {
					var i = parseInt(command);
					setting.contexts[i].click.call(this, this.store_, this.data_);
				},
				rightIconClick: function() {
					setting.rightIconClick.call(this, this.data);
				},
				showContexts: function(isShow) {
					var self = this;
					if(isShow) {
						setTimeout(function() {
							self.$refs["contexts"].popperElm.style.left = self.contextsx + "px";
							self.$refs["contexts"].popperElm.style.top = self.contextsy + "px";
							self.$refs["contexts"].popperElm.style.opacity = 1;
							try{
								setting.onContextShow.call(self, self.data_);
							}catch(e){
								console.log(e);
							}
						}, 150);
					}else{
						self.$refs["contexts"].popperElm.style.opacity = 0;
					}
				},
				renderContent: function(h, {
					node,
					data,
					store
				}) {
					var self = this;
					if(setting.contexts && setting.contexts.length !== 0) {
						return h("span", null, [h('span', null, node.label), h("span", {
							"class": "context_icon",
							style: {
								"position": "absolute",
								"right": "1000px",
								"padding": "0 10px"
							},
							domProps: {
								innerHTML: '<i class="el-icon-caret-bottom"></i>',
							},
							on: {
								click: function(event) {
									if(event.target.className === "context_icon" || event.target.parentNode.className === "context_icon") {
										//setting.onContextShow.call(self, data);
										var contexts = self.$refs["contexts"];
										contexts.visible = false;
										self.store_ = store;
										self.data_ = data;
										self.contextsx = event.clientX + 10;
										self.contextsy = event.clientY;
										contexts.show();
										return;
									}
								}
							}
						}, "")]);
					} else {
						return h("span", null, [h("span", null, node.label)]);
					}
				}
			},
			mounted: function() {
				/*this.$el.onmouseover = function(e) {
					console.log(e);
				}*/
			},
			watch: {
				filterText: function(val) {
					this.$refs.tree.filter(val);
				}
			},
		});

		return vanytree;
	}

	window.VanyTree = function(setting) {
		return new VanyTree_(setting);
	}
})();